<template>
  <div class="dropdown" :style="{display:active}">
    <div class="container">
      <div class="dropdown-items">
        <ul>
          <li>
            <a href="">
              <span>御 Mavic</span>
              <div class="img">
                <img src="" alt="" />
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <span>御 Mavic</span>
              <div class="img">
                <img src="" alt="" />
              </div>
            </a>
          </li>
          <li>
            <a href="">
              <span>御 Mavic</span>
              <div class="img">
                <img src="" alt="" />
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="dropdown-main">
        <div class="category">
          <h3>DJI Air 2S</h3>
          <ul>
            <li>
              <a href="">
                <div class="img">
                  <img src="../assets/img/index/img/ia_10027.png" alt="" />
                </div>
                <span>DJI Air 2S</span>
              </a>
            </li>
            <li>
              <a href="">
                <div class="img">
                  <img src="../assets/img/index/img/ia_10027.png" alt="" />
                </div>
                <span>DJI Air 2S</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            active:this.data
        }
    },
    props:['data'],
}
</script>

<style lang="scss" scoped>
.dropdown {
  width: 100%;
  background-color: white;
  border: 2px solid black;
  position: absolute;
  top: 105px;
  left: 0;
  z-index: 10;
  .container {
    text-align: left;
    display: flex;
    padding: 36px 142px;
    //   margin: 0 0 0 0 ;
    .dropdown-items {
      width: 200px;
      ul {
        li {
          span {
            //   text-align: right;
            //   display: block;
          }
        }
      }
    }
    .dropdown-main {
      .category {
        ul {
          display: flex;
          li {
              margin-right: 15px;
            .img {
              img {
                width: 124px;
              }
            }
            span {
                display: block;
                text-align: center;
            }
          }
        }
      }
    }
  }
}
// .active {
//     display: none;
// }
</style>